<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对决模式选择 - 贪吃蛇:新世界</title>
    
    <!-- Bootstrap CSS -->
    <link href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link href="css/duel-choose.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-danger sticky-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="game-home.html">
                <i class="bi bi-arrow-left me-2"></i>
                返回主页
            </a>
            <span class="navbar-text ms-auto">
                <i class="bi bi-swords me-2"></i>
                对决模式选择
            </span>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="container-fluid duel-bg">
        <div class="row min-vh-100 align-items-center">
            <div class="col-12">
                <!-- 页面标题 -->
                <div class="text-center mb-5">
                    <h1 class="display-4 fw-bold text-white mb-3">
                        <i class="bi bi-swords me-3"></i>
                        对决模式
                    </h1>
                    <p class="lead text-light">选择您想要的对决方式，体验不同的对战乐趣</p>
                </div>

                <!-- 模式选择卡片 -->
                <div class="row justify-content-center g-4">
                    <!-- 本地PVE模式 -->
                    <div class="col-lg-4 col-md-6">
                        <div class="mode-card" data-mode="local-pve">
                            <div class="card-header bg-primary text-white text-center">
                                <i class="bi bi-person-vs-robot display-4 mb-3"></i>
                                <h3 class="card-title">本地PVE</h3>
                                <span class="badge bg-warning text-dark">人机对战</span>
                            </div>
                            <div class="card-body">
                                <h5 class="text-primary">操作说明</h5>
                                <ul class="list-unstyled">
                                    <li><i class="bi bi-arrow-up-square text-success"></i> 玩家1：WASD控制</li>
                                    <li><i class="bi bi-cpu text-info"></i> AI对手：自动控制</li>
                                    <li><i class="bi bi-lightning-charge text-warning"></i> 空格键：加速移动</li>
                                </ul>
                                <div class="features">
                                    <h6 class="text-muted">特色功能</h6>
                                    <ul class="small text-muted">
                                        <li>智能AI对手，难度可调</li>
                                        <li>单人练习，提升技巧</li>
                                        <li>实时对战，紧张刺激</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer text-center">
                                <button class="btn btn-primary btn-lg w-100 select-btn" onclick="location.href='local-pve.html'">
                                    <i class="bi bi-play-circle me-2"></i>
                                    开始对战
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 本地PVP模式 -->
                    <div class="col-lg-4 col-md-6">
                        <div class="mode-card active" data-mode="local-pvp">
                            <div class="card-header bg-success text-white text-center">
                                <i class="bi bi-people display-4 mb-3"></i>
                                <h3 class="card-title">本地PVP</h3>
                                <span class="badge bg-info">双人对战</span>
                            </div>
                            <div class="card-body">
                                <h5 class="text-success">操作说明</h5>
                                <ul class="list-unstyled">
                                    <li><i class="bi bi-person text-primary"></i> 玩家1：WASD控制</li>
                                    <li><i class="bi bi-person text-danger"></i> 玩家2：方向键控制</li>
                                    <li><i class="bi bi-lightning-charge text-warning"></i> 空格键：加速移动</li>
                                </ul>
                                <div class="features">
                                    <h6 class="text-muted">特色功能</h6>
                                    <ul class="small text-muted">
                                        <li>双人同屏对战</li>
                                        <li>实时竞技，公平对决</li>
                                        <li>支持自定义地图</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer text-center">
                                <button class="btn btn-success btn-lg w-100 select-btn" onclick="location.href='local-pvp.html'">
                                    <i class="bi bi-trophy me-2"></i>
                                    开始对决
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 联机PVP模式 -->
                    <div class="col-lg-4 col-md-6">
                        <div class="mode-card disabled" data-mode="online-pvp">
                            <div class="card-header bg-secondary text-white text-center">
                                <i class="bi bi-globe display-4 mb-3"></i>
                                <h3 class="card-title">联机PVP</h3>
                                <span class="badge bg-light text-dark">即将推出</span>
                            </div>
                            <div class="card-body">
                                <h5 class="text-secondary">操作说明</h5>
                                <ul class="list-unstyled">
                                    <li><i class="bi bi-person text-primary"></i> 玩家：WASD控制</li>
                                    <li><i class="bi bi-lightning-charge text-warning"></i> 空格键：加速移动</li>
                                    <li><i class="bi bi-wifi text-info"></i> 网络对战功能</li>
                                </ul>
                                <div class="features">
                                    <h6 class="text-muted">特色功能</h6>
                                    <ul class="small text-muted">
                                        <li>在线匹配对战</li>
                                        <li>全球玩家竞技</li>
                                        <li>排行榜系统</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer text-center">
                                <button class="btn btn-secondary btn-lg w-100 select-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>
                                    敬请期待
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作说明区域 -->
                <div class="row mt-5">
                    <div class="col-12">
                        <div class="instruction-card">
                            <div class="card">
                                <div class="card-header bg-dark text-white">
                                    <h4 class="mb-0">
                                        <i class="bi bi-keyboard me-2"></i>
                                        详细操作说明
                                    </h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5 class="text-primary">玩家1控制 (WASD)</h5>
                                            <div class="keyboard-layout">
                                                <div class="key-row">
                                                    <div class="key key-w">W</div>
                                                </div>
                                                <div class="key-row">
                                                    <div class="key key-a">A</div>
                                                    <div class="key key-s">S</div>
                                                    <div class="key key-d">D</div>
                                                </div>
                                                <div class="key-hint">移动控制</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <h5 class="text-danger">玩家2控制 (方向键)</h5>
                                            <div class="keyboard-layout">
                                                <div class="key-row">
                                                    <div class="key key-up">↑</div>
                                                </div>
                                                <div class="key-row">
                                                    <div class="key key-left">←</div>
                                                    <div class="key key-down">↓</div>
                                                    <div class="key key-right">→</div>
                                                </div>
                                                <div class="key-hint">移动控制</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <h5 class="text-warning">通用功能键</h5>
                                            <div class="common-keys">
                                                <div class="key key-space">空格键</div>
                                                <span class="key-description">加速移动（所有玩家）</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../plugin/jquery-3.7.1.min.js"></script>
    <script src="../plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/duel-choose.js"></script>
</body>
</html>